<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
    <TourRecordDrawer @register="registerTourRecordDrawer"></TourRecordDrawer>
    <UserGoodsTourRecordDrawer @register="registerUserGoodsTourRecordDrawer"></UserGoodsTourRecordDrawer>
    <UserGoodsSetRemarkDrawer @register="registerUserGoodsSetRemarkDrawer" @success="reload"></UserGoodsSetRemarkDrawer>
  </div>
</template>
<script lang="ts" setup name="tourUserGoods">
import { ActionItem, BasicTable, TableAction } from '@apps/antd-admin/src/components/table';
import { useBaseTable } from '@apps/antd-admin/src/hooks';
import { useDrawer } from '@apps/antd-admin/src/components/drawer';
import { Api } from './data/api';
import { columns, searchFormSchema } from './data/data';
import TourRecordDrawer from '@apps/ant-bus/src/views/business/tourManage/tourRecord/components/TourRecordDrawer.vue';
import UserGoodsTourRecordDrawer from '@apps/ant-bus/src/views/business/tourManage/tourUserGoods/components/UserGoodsTourRecordDrawer.vue';
import UserGoodsSetRemarkDrawer from '@apps/ant-bus/src/views/business/userManage/userGoods/components/UserGoodsSetRemarkDrawer.vue';
import { useMessage } from '@apps/antd-admin/src/hooks/web/useMessage';

const { createMessage, createConfirm } = useMessage();

const { prefixCls, tableContext, handleDelete, handleSuccess, handlePost, handleBatchDelete } = useBaseTable({
  designScope: 'tourUserGoods-template',
  tableProps: {
    //表格标题
    title: '会员卡列表',
    //主键字段
    rowKey: 'userGoodsId',
    //列表查询handler
    handlerName: 'tourAppUserGoodsLookListHandler',
    //列表接口
    listUrl: Api.page,
    //列定义
    columns,
    //查询表单配置
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    //操作列配置
    actionColumn: {
      width: 260,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
    clickToRowSelect: true,
    rowSelection: {
      type: 'radio',
    },
  },
});

const [registerTable, { getForm, setProps, reload }, { rowSelection, hasSelectedRows, selectedRow }] = tableContext;

const [registerTourRecordDrawer, { openDrawer: openTourRecordDrawer }] = useDrawer();
const [registerUserGoodsTourRecordDrawer, { openDrawer: openUserGoodsTourRecordDrawer }] = useDrawer();
const [registerUserGoodsSetRemarkDrawer, { openDrawer: openUserGoodsSetRemarkDrawer }] = useDrawer();

/**
 * 行内操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    {
      label: '新增旅游记录',
      onClick: handlerAddTourRecord.bind(null, record),
    },
    {
      label: '查看旅游记录',
      onClick: handlerLookTourRecord.bind(null, record),
    },
  ];
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record): ActionItem[] {
  return [
    {
      label: '设置备注',
      onClick: handleRemark.bind(null, record),
    },
  ];
}

function handlerAddTourRecord(recordInfo) {
  let record = {
    userGoodsId: recordInfo.userGoodsId,
    airportId: recordInfo.airportId,
    employeeId: recordInfo.employeeId,
    vipCardNo: recordInfo.vipCardNo,
    userName: recordInfo.userName,
    userPhone: recordInfo.mobile,
    vipCardType: 1,
  };
  openTourRecordDrawer(true, {
    record,
    isUpdate: false,
  });
}

function handlerLookTourRecord(record) {
  openUserGoodsTourRecordDrawer(true, {
    record,
    isUpdate: false,
  });
}

function handleRemark(record) {
  openUserGoodsSetRemarkDrawer(true, {
    record,
    isUpdate: true,
  });
}
</script>
